<template>
  <div class="previewDecorate" v-if="controls">
    <img :src="phoneBgImg" class="phoneBgImg" id="phoneBgImg" alt="" />
    <div
      class="wrapper"
      :style="{
        left: wrapperOffsetLeft,
        top: wrapperOffsetTop,
        width: wrapperOffsetW,
        height: wrapperOffsetH,
      }"
    >
      <pageTopComponent
        v-if="controls[0].id"
        :id="controls[0].id"
        :ename="controls[0].ename"
      ></pageTopComponent>

      <ul>
        <li
          class="item"
          v-for="(c, controlsIndex) in controls"
          :key="c.id"
          :class="c.ename == 'floatButtonComponent' || c.ename == 'backTopComponent' ? ' suspend' : ''"
          :style="
            c.ename == 'floatButtonComponent' ? 
('width:' + c.main.floatButtonSize + 'px;'+
'height:' + c.main.floatButtonSize + 'px;' + 
'left:' + (c.main.floatingButtonPositon == 'br' || c.main.floatingButtonPositon == 'tr' ? 'auto;' : c.main.leftAndRightOffset + '%;') +
'top:' + (c.main.floatingButtonPositon == 'bl' || c.main.floatingButtonPositon == 'br' ? 'auto;' : c.main.offsetUpAndDown+ '%;') +
'right:' + (c.main.floatingButtonPositon == 'bl' || c.main.floatingButtonPositon == 'tl' ? 'auto;' : c.main.leftAndRightOffset + '%;') +
'bottom:' + (c.main.floatingButtonPositon == 'tl' || c.main.floatingButtonPositon == 'tr' ? 'auto;' : c.main.offsetUpAndDown + '%;') +
'zIndex:' + controlsIndex) : 
            c.ename == 'backTopComponent' ? 
('width:' + c.main.backTopSize + 10 + 'px;' +
'left:' + (c.main.buttonPosition == 'br' ? 'auto;' : c.main.leftAndRightOffset + '%;') +
'right:' + (c.main.buttonPosition == 'bl' ? 'auto;' : c.main.leftAndRightOffset + '%;') +
'bottom:' + (c.main.offsetUpAndDown + '%;') + 
'zIndex:' + controlsIndex) : 
            c.ename == 'pageTopComponent' ? 'display:none;' : 
            c.ename == 'invitationPageComponent' ? 'height:100%;' : ''
          "
        >
          <div
            class="controlWrapper"
            v-if="controlsIndex > 0"
            :style="
              c.ename === 'backTopComponent'
                ? 'width:' + (c.main.backTopSize + 10) + 'px;'
                : 'width:100%;'
            "
          >
            <component
              v-bind:is="c.ename"
              :controlsIndex="controlsIndex"
              :ename="c.ename"
              :item="c"
              :id="c.id"
            ></component>
          </div>
        </li>
      </ul>
      <div class="foot" v-if="controls[0].main.bottomMenu != 1">
        <FootComponent></FootComponent>
      </div>

      <dataPageFloatButton1 ref="dataPageFloatButton1" v-if="isShowDataPageFloatBtn"></dataPageFloatButton1>
      <dataPageFloatButton2 ref="dataPageFloatButton2" v-if="isShowDataPageFloatBtn"></dataPageFloatButton2>


    </div>
  </div>
</template>
<script>
import { mapState } from "vuex";
import phoneBgImg from "@/static/images/phone-bg.png";
export default {
  name: "previewDecorate",
  data() {
    return {
      controls: null, //组件列表
      phoneBgImg,
      wrapperOffsetTop: 0,
      wrapperOffsetLeft: 0,
      wrapperOffsetW: 0,
      wrapperOffsetH: 0,
      //是否显示数据页悬浮按钮
      isShowDataPageFloatBtn: true,
    };
  },
  created() {},
  props: [],
  components: {
    pageTopComponent: () => import("./components/pageTopComponent.vue"),
    carouselImageComponent: () =>
      import("./components/carouselImageComponent.vue"),
    announcementComponent: () =>
      import("./components/announcementComponent.vue"),
    imageListComponent: () => import("./components/imageListComponent.vue"),
    buttonGroupComponent: () => import("./components/buttonGroupComponent.vue"),
    listNavigationComponent: () =>
      import("./components/listNavigationComponent.vue"),
    titleComponent: () => import("./components/titleComponent.vue"),
    auxiliaryBlankComponent: () =>
      import("./components/auxiliaryBlankComponent.vue"),
    auxiliaryLineComponent: () =>
      import("./components/auxiliaryLineComponent.vue"),
    richTextComponent: () => import("./components/richTextComponent.vue"),
    floatButtonComponent: () => import("./components/floatButtonComponent.vue"),
    backTopComponent: () => import("./components/backTopComponent.vue"),
    projectComponent: () => import("./components/projectComponent.vue"),
    memberComponent: () => import("./components/memberComponent.vue"),
    FootComponent: () => import("./components/footComponent.vue"),
    commissionTemplateHeadComponent: () => import("./components/commissionTemplateHeadComponent.vue"),
    commissionTemplateListComponent: () => import("./components/commissionTemplateListComponent.vue"),
    dataDetailsComponent: () => import("./components/dataDetailsComponent.vue"),
    myTeamHeadComponent: () => import("./components/myTeamHeadComponent.vue"),
    myTeamListComponent: () => import("./components/myTeamListComponent.vue"),
    codeManageHeadComponent: () => import("./components/codeManageHeadComponent.vue"),
    codeManageListComponent: () => import("./components/codeManageListComponent.vue"),
    billPageHeadComponent: () => import("./components/billPageHeadComponent.vue"),
    billPageListComponent: () => import("./components/billPageListComponent.vue"),
    invitationPageComponent: () => import("./components/invitationPageComponent.vue"),
    dataPageFloatButton1: () => import("./components/dataPageFloatButton1.vue"),
    dataPageFloatButton2: () => import("./components/dataPageFloatButton2.vue"),
    dataPageHeadComponent: () => import("./components/dataPageHeadComponent.vue"),
    dataPageListComponent: () => import("./components/dataPageListComponent.vue"),
    promoteBusinessListComponent: () => import("./components/promoteBusinessListComponent.vue"),
    promoteBusinessBottomComponent: () => import("./components/promoteBusinessBottomComponent.vue"),
  },
  mounted() {
    // this.$nextTick(() => {
    this.init();
    // });
    window.onresize = () => {
      this.setWrapperSize();
    };
  },
  methods: {
    //页面初始化
    init() {
      this.controls = null;
      this.controls = JSON.parse(JSON.stringify(this.decorate.controls));
      this.setWrapperSize();
    },
    setWrapperSize() {
      if (document.getElementById("phoneBgImg")) {
        let phoneBgImg = document.getElementById("phoneBgImg");
        this.wrapperOffsetTop = phoneBgImg.offsetTop + 22 + "px";
        this.wrapperOffsetLeft = phoneBgImg.offsetLeft + 27 + "px";
        this.wrapperOffsetW = phoneBgImg.offsetWidth - 55 + "px";
        this.wrapperOffsetH = phoneBgImg.offsetHeight - 45 + "px";
      }
    },
  },
  computed: mapState(["decorate"]),
  watch: {},
};
</script>
<style scoped lang="scss">
.previewDecorate {
  background-color: #fefefe;
  display: flex;
  align-items: center;
  position: relative;
  z-index: 1;
  justify-content: center;
  height: 100%;
  width: 100%;
  .phoneBgImg {
    width: 430px;
    display: block;
    height: 795px;
  }
  .wrapper {
    position: absolute;
    z-index: 2;
    box-sizing: border-box;padding-top:30px;
    border-radius:30px;
    &::-webkit-scrollbar {
      display: none;
    }
    .head{background-color: #fff;border-radius: 15px 15px 0 0;}
    ul {width:100%;
      display: flex;height:calc(100% - 30px);overflow-y:auto;
      flex-direction: column;border-radius: 0 0 40px 40px;
      background-color: #fff;
      &::-webkit-scrollbar {
        display: none;
      }
      li {
        width: 100%;
        display: flex;
        &.suspend {
          position: absolute;
        }
        & > .item {
          width: 100%;
          position: relative;
          margin-bottom: 1px;overflow: hidden;

          .controlWrapper {
            width: 100%;
          }
        }
      }
    }
    .foot {
      width: 100%;
      height: 50px;
      background-color: #fff;
      border-top: 1px solid #eee;
      box-sizing: border-box;
      display: flex;
    }
  }
}
</style>